<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>AＶＡＶＡ</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="shortcut icon" href="img/avana.png">
	<script src='js/jquery.min.js' type="text/javascript"></script>
	<script src="js/bootstrap.js" type="text/javascript"></script>
	<script src="js/index.js" type="text/javascript"></script>
</head>
<body>
	<nav class="myNav">
		<div class="navbar-header">
	      <a class="navbar-brand mybrandLink" href="#">
	        <img class="mybrand" src="img/logo.png" alt="">
	      </a>
	      <span class="glyphicon glyphicon-menu-hamburger menuBtn"></span>
	    </div>
	  <ul class="myMenu nav navbar-nav navbar-right">
	  	<li class="navActive"><a href="index.html" title="">首页</a></li>
	  	<li class="shop"><a href="html/shop.html" title="">商店 <span class="glyphicon glyphicon-menu-down"></span></a>
			<ul class="mysecMenu dropdown">
				<li><a href="html/shop.html" title="">洁面</a></li>
				<li><a href="html/shop.html" title="">保养</a></li>
				<li><a href="html/shop.html" title="">美妆</a></li>
			</ul>
	  	</li>
	  	<li><a href="html/about.html" title="">关于</a></li>
	  	<li><a href="html/brandStory.html" title="">品牌故事</a></li>
	  	<li><a href="html/news.html" title="">资讯</a></li>
	  	<li><a href="html/contact.html" title="">联系</a></li>
	  </ul>
	</nav>

	<!-- 轮播 -->
	<div id="carousel-example-generic" class="carousel slide myslide" data-ride="carousel" data-interval="3000">
		<!-- Indicators -->
		<ol class="carousel-indicators">
			<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
			<li data-target="#carousel-example-generic" data-slide-to="1"></li>
			<li data-target="#carousel-example-generic" data-slide-to="2"></li>
		</ol>

		<!-- Wrapper for slides -->
		<div class="carousel-inner" role="listbox">
			<div class="item active">
				<div class="carousel-caption">
					<p class="bTitle">
						AVANA
					</p>
					<p class="lTitle">
						你的美丽应该陪伴你一生
					</p>
				</div>
			</div>
			<div class="item">
				<div class="carousel-caption">
					<p class="bTitle">
						AVANA
					</p>
					<p class="lTitle">
						你的美丽应该陪伴你一生
					</p>
				</div>
			</div>
			<div class="item">
				<div class="carousel-caption">
					<p class="bTitle">
						AVANA
					</p>
					<p class="lTitle">
						你的美丽应该陪伴你一生
					</p>
				</div>
			</div>
		</div>

		<!-- Controls -->
		<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>

	<section id="article">
		<h1>用心塑造自己，让自己一直美下去</h1>
		<div class="rightArticle r">
			<p class="lineImg"><img src="img/line.png" alt=""></p>
			<div>
				<h3>“每个人都不同，每个人都是独一无二的”</h3>
				<p>美像甘泉,使周围的一切都沐浴着美的光辉。你需要一家专业的美容机构来帮助你。我们不是要打造另外一个你，而是要发现独具你特色的美，然后让你一直美下去。</p>
				<p>青春期短不可负，何不让青春时间长一点，抓住即将逝去的时光。</p>
			</div>
		</div>
	</section>


	<section class="contant">
		<div class="row firstRow">
			<div id="textContant1" class="col-md-6 col-xs-12 col-sm-6 textContant myhidden">
				<h3>“每个人都不同，你的身材”</h3>
				<p>你的身高可能控制不了，可你的体重我们能帮你控制，</p>
				<p>赏心悦目的身材才是好身材。</p>
			</div>
			<div class="col-md-6 col-xs-12 col-sm-6 picBox">
				<img id="pic1" class="myhidden" src="img/index01.png" alt="">
			</div>
		</div>
		<div class="row lastRow">
			<div class="col-md-6 col-xs-12 col-sm-6 picBox">
				<img id="pic2" class="myhidden" src="img/index02.png" alt="">
			</div>
			<div id="textContant2" class="col-md-6 col-xs-12 col-sm-6 textContant myhidden">
				<h3>“每个人都不同，你的容颜”</h3>
				<p>也许你觉得自己不好看，可每个人都不同，我们会帮你发现你的美，</p>
				<p>让你抓住青春的时光。</p>
			</div>	
		</div>
	</section>


	<section id="sedArticle">
		<h1 class="myhidden">现在开始，改变自己，我是认真的</h1>
		<div class="secdTitle">
			<div>
				<h3 class="myhidden">“美丽的女孩总是比一般人先行动起来”</h3>
			</div>
		</div>
	</section>

	<section class="mypic">
		<img class="myhidden" id="firstPic" src="img/pic.jpg" alt="">
	</section>


	<section class="contant" id="step">
		<div class="row firstRow">
			<div class="col-md-6 col-xs-12 col-sm-6 picBox">
				<img id="step1" class="myhidden" src="img/step01.jpg" alt="">
			</div>
			<div id="step1Text" class="col-md-6 col-xs-12 col-sm-6 textContant myhidden">
				<h3><span>step1</span>&nbsp;&nbsp;&nbsp;&nbsp;洁面</h3>
				<p>你需要一家专业的美容机构来帮助你。我们不是要打造另外一个你，</p>
				<p>青春期短不可负，抓住即将逝去的时光。</p>
				<a href="#" title="">去商店购买 ></a>
			</div>
			
		</div>
		<div class="row centerRow">
			<div id="step2Text" class="col-md-6 col-xs-12 col-sm-6 textContant myhidden">
				<h3><span>step2</span>&nbsp;&nbsp;&nbsp;&nbsp;保养</h3>
				<p>你需要一家专业的美容机构来帮助你。我们不是要打造另外一个你，</p>
				<p>青春期短不可负，抓住即将逝去的时光。</p>
				<a href="#" title="">去商店购买 ></a>
			</div>	
			<div class="col-md-6 col-xs-12 col-sm-6 picBox">
				<img id="step2" class="myhidden" src="img/step02.jpg" alt="">
			</div>
		</div>
		<div class="row lastRow">
			<div class="col-md-6 col-xs-12 col-sm-6 picBox">
				<img id="step3" class="myhidden" src="img/step03.jpg" alt="">
			</div>
			<div id="step3Text" class="col-md-6 col-xs-12 col-sm-6 textContant myhidden">
				<h3><span>step3</span>&nbsp;&nbsp;&nbsp;&nbsp;美妆</h3>
				<p>你需要一家专业的美容机构来帮助你。我们不是要打造另外一个你，</p>
				<p>青春期短不可负，抓住即将逝去的时光。</p>
				<a href="#" title="">去商店购买 ></a>
			</div>	
		</div>
	</section>

	<section id="findMore" class="myhidden">
		<h1 class="">探索更多</h1>
		<h3 class="mylinks">
			<span><a href="" title="">关于</a></span>
			<span><a href="" title="">商店</a></span>
			<span><a href="" title="">品牌</a></span>
		</h3>
	</section>

	<section class="mypic">
		<img class="myhidden" id="lastPic" src="img/pic02.jpg" alt="">
	</section>


	<footer id="footer">
		<div class="footerTitle">
			<h1>A V A N A</h1>
			<h2>你的美丽应该陪伴你一生</h2>
		</div>
		<hr>
		<div class="row">
			<div id="footerL" class="col-md-6 col-xs-12 col-sm-6">
				<p>电话：100-000-0000</p>
				<p>邮箱：10000@qq.com</p>
				<p>地址：中国互联网省域名市网站区666号</p>
			</div>
			<div class="col-md-1">
			</div>
			<div id="footerR" class="col-md-5 col-xs-12 col-sm-6">
				<p>获取更多美妆资讯:</p>
				<input type="email" name="" value="" placeholder="请输入邮箱">
				<button type="submit">提交</button>
			</div>
		</div>
		<p id="lastText">© Copyright 2018 xxx.com。</p>
	</footer>	

	<div id="goTop">
		<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
	</div>
</body>
</html>